<template>
    <div class="content">
        <div class="talk" v-if="name =='admin'">
            上游报备话术:
            <br>
            
            <a href="http://118.190.2.70:9005/shangyoujiekouYD1.pdf">移动1报备话术(暂无)</a>
            <a href="http://118.190.2.70:9005/shangyoujiekouYD4.pdf">移动4报备话术</a>
            <a href="http://118.190.2.70:9005/shangyoujiekouLT1.pdf">联通1报备话术</a>
            

        </div>
        <div class="tit">
            <h1>开发者信息</h1>
            <div class="dep">
                <span>当前身份 <em>「{{realname}}」</em></span>
            </div>
        </div>
        <div class="down"></div>
        
        <div class="devMes">
            <a href="" style="background-color: #f5f5f5 ;" class="one">
                    <img src="../assets/img/money.png" alt=""> 
                    
                    <p>{{money}} 元</p>
                    <i>账户余额</i>
                    <b></b>
            </a>
            <a href="/enterprise" style="background-color:#f5f5f5" class="two">
                <span>
                    <img src="../assets/img/enterprise.png" alt="">
                    
                    <p>{{enterprice}} 个</p>
                    <i>上线应用</i>
                </span>  
            </a>
            <a href="/seats" style="background-color:#f5f5f5" class="three">
                <span>
                    <img src="../assets/img/seatNum.png" alt="">
                    
                    <p>{{seatNum}} 个</p>
                    <i>当前坐席</i>
                    <b>签约坐席额度: {{seatSumCount}}个</b>
                </span>  
            </a>
        </div>
        <div class="moneyState">
            
            <h1>
                <img src="../assets/img/money.png" alt="">
                财务状态
                </h1>
            <a href="/enterprise">充值</a>
        </div>
        <div class="cont">
                <div class="message1">
                <dl>
                    <dt>账户余额：
                        <em>{{money}}</em>
                        元
                        <!-- <em>10.00</em> -->
                        <!-- <i class="graytips">（赠送金额可用于除月功能费及月保底套餐以外的消费项目）</i> -->
                    </dt>
                </dl>
                <dl>
                    <dt>当前费率:
                        <em>{{rate}}</em>
                        元/分钟
                        
                   </dt>
                    
                </dl>
                <dl>
                    <dt>座席月租:
                        <em>{{seatRate}}</em>
                        <label>元/月/座席</label>
                    </dt>
                </dl>
                
            </div>
            <div class="message1" style="margin-top:20px">
                <dl>
                    <dt>可用额度预警</dt>
                    <dd style="font-size:12px;margin-left:30px;margin-top:20px"> 可用额度预警: <i>(余额预警阈值为：￥ <em>100</em> )</i>
                    <i style="color:#1E90FF;cursor:pointer;font-style:normal;margin-left:50px" @click="update()">修改</i>
                    
                    </dd>
                </dl>
            </div>
            </div>
    </div>
</template>

<script>
import axios from 'axios';
import Schart from "vue-schart";

export default {
    name: "dashboard",
    data() {
        return {
            money:0,//用户余额
            enterprice:0,//企业数量
            seatNum:0,//坐席数量
            seatSumCount:0,//签约坐席额度
            rate:0,//费率
            seatRate:0,//月租
            realname:'',
            name: localStorage.getItem("realname"),
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === "admin" ? "超级管理员" : "普通用户";
        }
    },

    created(){
        this.realname = localStorage.getItem("realname")
        this.money = localStorage.getItem("money")
        this.getList()
    },

    methods: {
        //余额、企业数量、坐席数量
        getList(){
            let params = {

            }
            axios
            .post("http://118.190.2.70:9999/vo/user/getUserLogin",params)
            // .post("api/user/getUserLogin",params)
            .then(res =>{
                console.log(res.data.data)
                this.money = res.data.data.money
                this.enterprice = res.data.data.uuidCount
                this.seatNum = res.data.data.seatCount
                this.seatSumCount =res.data.data.seatSumCount
                this.rate = res.data.data.rate
                this.seatRate =res.data.data.seatRate
            })
            .catch(err =>{
                console.log(err.data.message)
            })
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() +
                    1}/${date.getDate()}`;
            });
        },
        api(){
            window.open(this.indexApi,"_blank")
        },
        topApi(){
            window.open(this.topindexApi,"_blank")
        },
        topApi1(){
            window.open(this.topindexApi1,"_blank")
        }
    },
    //修改
    update(){
        console.log("修改的方法")
    },

};
</script>

<style scoped>
.content{
    padding: 0 100px;
    background-color: #ffff;
    overflow-y:visible;
    height: 800px;
}
.talk a{
    color:black
}
.talk a:link{
    margin-left: 20px;
    text-decoration: none;
    color: #900b09;
    background: transparent;
    border-bottom: 1px solid #900b09;
}
.talk a:hover{
    text-decoration: none;
    color: #ff0000;
    background: transparent;
    border-bottom: 1px solid #ff0000;
}
.tit{
    padding-top: 75px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.tit h1{
    font-family: "兰亭纤黑";
    font-size: 28px;
    font-weight: normal;
    height: 48px;
    line-height: 48px;
    width: 30%;
}
.dep span em {
    color: #28b740;
}
.devMes{
    display: flex;
    justify-content: space-between;
}
.devMes img{
    position: relative;
    top:10px;
    left:25px
}
.one{
    height: 120px;
    width: 320px;
}
.one p{
    position: relative;
    top: -40px;
    left: 160px;
    font-size: 30px;
    color:#ffa022;
}
.one i{
    position: relative;
    top: -15px;
    left: 20px;
    color:#ffa022;
    font-style:normal;
}
.one b{
    position: relative;
    top: -17px;
    left: 115px;
    color: #ffa022;
    font-style: normal;
    font-size: 12px;
}
.two{
    height: 120px;
    width: 320px;
}
.two p{
    position: relative;
    top: -40px;
    left: 160px;
    font-size: 30px;
    color:#3395ff;
    
}
.two i{
    position: relative;
    top: -15px;
    left: 20px;
    color:#3395ff;
    font-style:normal;
}
.three{
    height: 120px;
    width: 320px;
}
.three p{
    position: relative;
    top: -40px;
    left: 160px;
    font-size: 30px;
    color:#fe4c56;
    width: 200px;
}
.three i{
    position: relative;
    top: -15px;
    left: 20px;
    color:#fe4c56;
    font-style:normal;
}
.three b{
    position: relative;
    top: -17px;
    left: 115px;
    color: #fe4c56;
    font-style: normal;
    font-size: 12px;
}
.down{
    width: 100%;
    background-color:#808080;
    height: 3px;
    margin-bottom: 30px;
}
.devMainnum{
    padding: 50px;
}
.devMainnum h1{
    color: #808080;
    font-size: 24px;
    font-weight: normal;
    height: 69px;
    line-height: 69px;
    padding: 0 0 0 80px;
    width: 210px;
}
.moneyState{
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.moneyState h1{
    color: #808080;
    font-size: 24px;
    font-weight: normal;
    height: 69px;
    line-height: 69px;
    padding: 0 0 0 30px;
    width: 210px;
    display: flex;
    justify-content: space-around;
}
.moneyState a{
    background: #f2ae43 none repeat scroll 0 0;
    height: 46px;
    width: 146px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .message{
    background: #f4fafd none repeat scroll 0 0;
    margin-right: 26px;
    padding: 30px 0 18px;
    width: 68%;
}
.message dl {
    color: #565656;
    font-size: 16px;
    padding: 0 0 12px;
    width: 100%;
}
.message dt {
    float: left;
    height: 26px;
    line-height: 26px;
    padding-right: 20px;
    text-align: right;
    width: 220px;
}
.message dd {
    font-size: 14px;
    height: 26px;
    line-height: 26px;
} */
.message1{
    background: #f4fafd none repeat scroll 0 0;
    margin: 10px 0 0;
    overflow: hidden;
    padding: 30px 0 18px;
    width: 100%;
}
.message1 dl{
    margin-top:10px ;
    margin-left: 30px;
}
.message1 em{
    color: #f49500;
}
.message2{
    background: #f4fafd none repeat scroll 0 0;
    margin: 10px 0 0;
    overflow: hidden;
    padding: 30px 0 18px;
    width: 100%;
}
.graytips{
    color: #9c9c9c;
    padding-left: 20px;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
    height: 200px;
    width: 200px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}
/* .two{
    background-color: rgb(97 157 183);
    border-radius: 30px;
} */
.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}

</style>
